<template>
  <div class="container">
    <div class="page-header">
      <strong>数据点</strong>
    </div>
    <div class="filter-container">
      <div class="filter-item">
        <el-input v-model="q.code" placeholder="位号" style="width: 120px" />
      </div>
      <div class="filter-item">
        <el-input v-model="q.itemCode" placeholder="指标编码" style="width: 120px" />
      </div>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button
         v-permission="['Admin.Remote.Update']"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-open"
        @click="updateDataByEquipment(true)"
      >打开数据源数据上传
      </el-button>
      <el-button
         v-permission="['Admin.Remote.Update']"
        class="filter-item"
        style="margin-left: 10px;"
        type="danger"
        icon="el-icon-turn-off"
        @click="updateDataByEquipment(false)"
      >关闭数据源数据上传
      </el-button>
      <el-button
         v-permission="['Admin.Remote.Update']"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-open"
        @click="updateAlarmByEquipment(true)"
      >打开数据源告警上传
      </el-button>
      <el-button
         v-permission="['Admin.Remote.Update']"
        class="filter-item"
        style="margin-left: 10px;"
        type="danger"
        icon="el-icon-turn-off"
        @click="updateAlarmByEquipment(false)"
      >关闭数据源告警上传
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="tableLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="序号" type="index" :index="indexMethod" align="center" width="60"></el-table-column>
      <el-table-column label="位号" align="center" min-width="90px">
        <template slot-scope="{row}">
          <span>{{ row.code || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="指标编码" align="center" min-width="90px">
        <template slot-scope="{row}">
          <span>{{ row.itemCode || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否上传数据" align="center" min-width="90px">
        <template slot-scope="{row}">
          <span v-permission="!['Admin.Remote.Update']">{{ row.uploadData?'是':'否' }}</span>
          <el-switch v-permission="['Admin.Remote.Update']" v-model="row.uploadData" @change="updateNorthboundDataElement(row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否上传告警" align="center" min-width="90px">
        <template slot-scope="{row}">
          <span v-permission="!['Admin.Remote.Update']">{{ row.uploadAlarm?'是':'否' }}</span>
          <el-switch v-permission="['Admin.Remote.Update']" v-model="row.uploadAlarm" @change="updateNorthboundDataElement(row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-permission="['Admin.Remote.Update']" type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-data-element-drawer ref="editDataElementDrawer" @save="save"></edit-data-element-drawer>
    <pagination
      v-show="totalCount > 0"
      :total="totalCount"
      :page-index.sync="q.page"
      :page-size.sync="q.size"
      @pagination="getNorthboundDataElement"
    />
  </div>
</template>

<script>
  import {
    getNorthboundDataElement,
    updateNorthboundDataElement,
    updateDataByEquipment,
    updateAlarmByEquipment
  } from "@/api/northbound";
  import EditDataElementDrawer from "./EditDataElementDrawer";
  import Pagination from "@/components/Pagination";

  export default {
    components: {
      'pagination': Pagination,
      'edit-data-element-drawer': EditDataElementDrawer
    },
    data() {
      return {
        isSubmitLoading: false,
        tableLoading: false,
        tableKey: 0,
        q: {
          gatewayId: undefined,
          northboundId: undefined,
          equipId: undefined,
          itemCode: undefined,
          code: undefined,
          page: 1,
          size: 10
        },
        totalCount: 0,
        tableData: []
      };
    },
    computed: {},
    watch: {},
    created() {
    },
    methods: {
      handleSearch() {
        this.getNorthboundDataElement();
      },
      init(gatewayId, nId, eId) {
        this.q.page = 1;
        this.q.gatewayId = gatewayId;
        this.q.northboundId = nId;
        this.q.equipId = eId;
        this.getNorthboundDataElement();
      },
      getNorthboundDataElement() {
        this.tableLoading = true;
        getNorthboundDataElement(this.q).then(result => {
          this.tableData = result.content;
          this.totalCount = result.totalElements;
          this.tableLoading = false;
        });
      },
      updateNorthboundDataElement(item) {
        this.tableLoading = true;
        updateNorthboundDataElement(item).then(result => {
          this.$message({
            message: "编辑成功",
            type: "success"
          });
          this.getNorthboundDataElement();
          this.tableLoading = false;
        });
      },
      updateDataByEquipment(val) {
        this.tableLoading = true;
        updateDataByEquipment(this.q.gatewayId, this.q.northboundId, this.q.equipId, val).then(result => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.getNorthboundDataElement();
          this.tableLoading = false;
        });
      },
      updateAlarmByEquipment(val) {
        this.tableLoading = true;
        updateAlarmByEquipment(this.q.gatewayId, this.q.northboundId, this.q.equipId, val).then(result => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.getNorthboundDataElement();
          this.tableLoading = false;
        });
      },
      save() {
        this.getNorthboundDataElement();
      },
      handleUpdate(row) {
        this.$refs['editDataElementDrawer'].show(row);
      },
      indexMethod(index) {
        return this.q.size * (this.q.page - 1) + index + 1;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page-header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    overflow: hidden;
    border-bottom: 2px solid #e4e7ed;

    strong {
      height: 38px;
      box-sizing: border-box;
      line-height: 38px;
      display: inline-block;
      list-style: none;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      position: relative;
    }

  }

  .full-container {
    min-height: calc(100vh - 50px);
  }
</style>
